Створення іконок. Практика

Перше, що нам знадобиться, це відповісти на низку запитань:

  1. наскільки складний пакет ми хочемо отримати?
  2. які розміри включити?
  3. чи робитимемо один малюнок і потім його зменшувати або кожен розмір малювати наново?

Для тестового пакету зазначимо такі вимоги:

  1. пакет матиме три універсальні іконки і особливі іконки для декількох популярних розширень
  2. іконки для розширень повинні містити текст розширення і особливий колір;
  3. кольори для розширень відповідатимуть аналогічним в пакеті іконок "amigos";
  4. для кожного розміру зображення малюватиметься наново;
  5. розміри будуть: 16, 32, 48, 96, 256 пікселів.

Як прототип використовуватиметься цей малюнок (знайдений тут):

За роботу!

Бережіть голову!

І відразу - стоп! Перше, що важливо пам'ятати про іконки - їх багато! І у кожної - багато розмірів! А це означає, що доведеться виконати колосальну кількість нудної, одноманітної роботи.

Тому найперше, про що потрібно подумати - це як максимально автоматизувати увесь процес і виключити з нього рутину. Практика показує, що краще витратити тиждень на обдумування автоматизації процесу, чим три дні повторювати одноманітні дії. Тому що вже до кінця першого дня ви тихо ненавидітимете ваш пакет іконок і мріятимете про його завершення.

Програмне забезпечення

Знадобляться такі програми:

Програми підбиралися так, щоб вони були досить знайомі і обов'язково максимально автоматизували процес. В результаті був зроблений такий вибір:

Автоматизація процесу

Шляхом довгих міркувань були визначені такі питання, які рутинні, але можуть бути автоматизовані:

  1. швидке створення усіх розмірів іконки;
  2. швидке створення нової іконки з існуючої
  3. швидка зборка іконки.

Швидке створення усіх розмірів іконки

Photoshop має чудовий інструмент, який дозволяє зберігати зображення як набір фрагментів. Це Файл \ Зберегти для Веб. От як це працює. Спершу за допомогою інструменту "розкроювання" на зображенні виділяються області, які відповідатимуть розмірам іконок:

Далі, власне виконується команда Файл \ Зберегти для Веб. У вікні, що з'явилося, для кожного раніше розкроєного фрагмента виставляється формат "PNG-24":

У вікні збереження вибираються "тільки зображення" і "користувацькі фрагменти"; до речі кажучи, ім'я файлу взагалі ніяк не бере участь у збереженні, так що його можна писати будь-яке:

В результаті після збереження в підтеці "images" збереглися усі потрібні зображення, готові для імпорту в іконку. Перший пункт виконаний!

Швидке створення нової іконки з існуючої

Плануються дві відмінності іконок: колір і розширення.

Для швидкої зміни кольору в Photoshop використовуватимуться шари, що коригують, з маскою ("колірний тон/насиченість" та "рівні").

А ось з розширеннями не усе так просто: якщо з великими розмірами усе добре, то для дрібних розмірів розширення треба малювати попіксельно, щоб вони були чіткі. Або ж використовувати особливі шрифти. Пошук по інтернету знайшов два правильні шрифти: Munro та Wendy. Таким чином обидва аспекти створення нової іконки з існуючої автоматизовані.

Швидке збирання іконки

Тут усе просто: Microangelo Studio підтримує імпорт зображень без додаткових питань, якщо ці зображення на нього просто перетягнути. Причому перетягнути можна усі зображення відразу. Єдиний недолік - збереження в новий файл не має клавіатурного скорочення, тобто його доведеться кожного разу виконувати через головне меню.

Малювання розмірів іконки

Спершу був намальований найбільший розмір. Вийшло дуже схоже, хоча фон довелося використати дещо іншій:

Далі копії усіх шарів іконки об'єднувалися і зменшувалися до нового цільового розміру, наприклад, до 96х96. Отримане зображення використовувалося як підкладка при малюванні зменшеного зображення. При цьому елементи підганялися так, щоб мати чіткі межі. Навіть якщо це не відповідало зображенню свого великого брата.

Зрештою були намальовані усі розміри. Для розміру 16х16 не вийшло додати розширення, тому доведеться обійтися без нього:

Далі, щоб швидко міняти відтінок значка, додаються коригуючі шари-фільтри, з растровою маскою:

На цьому створення розмірів іконки (першоджерела) завершене. У нім передбачені усі розміри, автоматизовано розширення і відтінок, усе подано наглядно.

Іконки плейлістів і аудіо створюються аналогічним чином.

Зборка розмірів в іконку

Після того, як в теку Images збережені всі розміри однієї іконки, виконується наступна послідовність:

Після усіх маніпуляцій іконка "зберігається як" (з ім'ям цільового розширення, щоб не плутатися).

Зверніть увагу: перелік розмірів справа має обмеження за розміром передперегляду в 48х48 пікселів. Тому тут добре видно, що було б, якби при створенні малих розмірів ми пішли шляхом простої зміни розміру.

Створення усіх іконок

Нарешті, настає момент, коли на нас починає працювати уся наша автоматизація. Для створення наступної іконки потрібно п'ять простих дій:

  1. Створюється копія першоджерела, перейменовується відповідно до розширення, яке в ній зберігатиметься, і відкривається (у Photoshop).
  2. Вписується розширення і настроюється відтінок "кадру" на іконці.
  3. Проводиться "збереження для веб".
  4. У теці "images" виділяються усі малюнки і перетягуються на вікно Microangelo Studio.
  5. Іконка "зберігається як".

Таким чином, на кожну іконку витрачатиметься максимум хвилина. І те, лише для того, щоб підібрати іконці колір. В результаті усього через 15-20 хвилин усі іконки збережені і готові до наступного кроку.

Створення бібліотеки іконок

Створення бібліотеки іконок виконується так:

  1. Відкривається Microangelo Librarian і в нім створюється новий документ.
  2. Всі раніше створені іконки перетягуються на вікно Microangelo Librarian; у спливаючому меню вибирається "add icons to workspace".
  3. Свіжододані іконки упорядковуються.
  4. Бібліотека іконок зберігається за допомогою File \ Save as....

У результаті, бібліотека іконок набула наступного вигляду:

Зверніть увагу: для зручності і функціональності спершу йдуть три іконки типів, потім - іконки розширень в тому вигляді, в якому вони йдуть в типах файлів Light Alloy. Така організація не обов'язкова, але дуже полегшить життя на наступному етапі. І пам'ятаємо про нульову іконку!

Створення файлу опису

Файл опису створюється відповідно до правил, описаних в теорії створення іконок для Light Alloy.

<?xml version="1.3"?> <ICONLIB> <AUTHOR name="Gilorn" email="" homepage="http://www.light-alloy.ru" comments="16x32x48x96x256 (RGB + alpha)"/> <ICONS> <ICON id="0" ext="3GP,ASF,AVS,EVO,BIK,TP,QT,RM,RMVB,RV,TS,WEBM,WTV,DVR-MS"/> <!-- video --> <ICON id="1" ext="AIF,AIFC,AIFF,APE,AT3,AU,CDA,DTS,KAR,M4A,MID,MIDI,MKA,MOD,MP1,MP2,MPA,MPC,OMA,RA,RAM,RMI, SND,AMR,AOB,IT,MO3,S3M,WV,XM,OPUS,TAK"/> <!-- audio --> <ICON id="2" ext="ASX,BDMV,IFO,LST,MPLS,PLS"/> <!-- playlist --> <ICON id="3" ext="LAP"/> <ICON id="4" ext="CUE"/> <ICON id="5" ext="M3U,M3U8"/> <ICON id="6" ext="AVI,DIVX"/> <ICON id="7" ext="MPE,MPEG,MPG,MPV,VOB,MTS,M2TS,M1V,M2V"/> <ICON id="8" ext="MKV"/> <ICON id="9" ext="F4V,FLV"/> <ICON id="10" ext="MP4,M4V"/> <ICON id="11" ext="HDMOV,MOV"/> <ICON id="12" ext="OGM,OGX,OGV"/> <ICON id="13" ext="WM,WMV"/> <ICON id="14" ext="AAC"/> <ICON id="15" ext="AC3"/> <ICON id="16" ext="FLAC"/> <ICON id="17" ext="MP3"/> <ICON id="18" ext="OGG"/> <ICON id="19" ext="WAV"/> <ICON id="20" ext="WMA"/> </ICONS> </ICONLIB>

Конструкція виду "<!-- video -->" є коментарем. Він дозволяє робити позначки для власних потреб, які ігноруватимуться при обробці файлу програмами.

Результат

І ось, нарешті свіжий пакет іконок готовий. Залишилося тільки перевірити, що імена файлу опису і бібліотеки іконок співпадають, і - готово!